<template>
	<div class="box">
		<el-card class="card-css">
			<div class="zhpj">
				<span class="zhpj-span">工单配置</span>
			</div>

			<div class="table-css">
				<div>
					<span>不经确认，直接发出</span>
					<el-switch v-model="value1" class="switch-css" />
				</div>
				<div class="biaotou-css">
					<div class="select02">
						<el-select placeholder="能效">
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</div>

					<div class="block">
						<el-date-picker
							type="daterange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
						/>
					</div>

					<div class="btn-01">
						<el-button type="primary" @click="exportExcel"
							>下 载</el-button
						>
					</div>
					<div class="btn-02">
						<!-- <el-button type="primary">打 印</el-button> -->
					</div>
				</div>
			</div>

			<div class="table">
				<el-table
					id="table"
					:data="tableData"
					stripe
					style="width: 100%"
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column prop="date" label="确认发出">
						<span>
							<el-button
								@click="quren"
								:icon="ArrowRight"
								circle
								style="
									color: #f79646;
									background: #eaf2fa;
									border: #eaf2fa;
								"
							/>
						</span>
					</el-table-column>
					<el-table-column label="触发">
						<template #default="scope">
							<span>{{ dayjs(scope.row.triggeringTime).format('YYYY-MM-DD') }}</span>
						</template>
					</el-table-column>
					<el-table-column
						label="预计完成"
					>
					<template #default="scope">
							<span>{{ dayjs(scope.row.expectedCompletionTime).format('YYYY-MM-DD') }}</span>
						</template></el-table-column>
					<el-table-column
						prop="problemDescription"
						label="问题描述"
					/>
					<el-table-column prop="possibleCause" label="可能原因" />
					<el-table-column prop="friendlyReminder" label="友情提示" />
					<el-table-column
						prop="urgencyType"
						label="紧急类别"
						:filters="[
							{ text: '1', value: 0 },
							{ text: '2', value: 1 },
							{ text: '3', value: 2 },
							{ text: '4', value: 4 },
							{ text: '5', value: 5 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="workOrderType"
						label="工单类别"
						:filters="[
							{ text: '优化操作', value: 0 },
							{ text: '设备故障', value: 1 },
							{ text: '预测性维护', value: 2 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					>
						<template #default="scope">
							<span v-if="scope.row.workOrderType == '0'"
								>优化操作</span
							>
							<span v-if="scope.row.workOrderType == '1'"
								>设备故障</span
							>
							<span v-if="scope.row.workOrderType == '2'"
								>预测性维护</span
							>
						</template>
					</el-table-column>
					<el-table-column
						prop="influenceType"
						label="影响氛围"
						:filters="[
							{ text: '能效', value: 0 },
							{ text: '舒适', value: 1 },
							{ text: '安全', value: 2 },
							{ text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					>
						<template #default="scope">
							<span v-if="scope.row.influenceType == '0'"
								>能效</span
							>
							<span v-if="scope.row.influenceType == '1'"
								>舒适</span
							>
							<span v-if="scope.row.influenceType == '2'"
								>安全</span
							>
							<span v-if="scope.row.influenceType == '3'"
								>所有</span
							>
						</template>
					</el-table-column>
					<el-table-column
						prop="riskType"
						label="风险"
						:filters="[
							{ text: '高', value: 0 },
							{ text: '中', value: 1 },
							{ text: '低', value: 2 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					>
						<template #default="scope">
							<span v-if="scope.row.riskType == '0'">高</span>
							<span v-if="scope.row.riskType == '1'">中</span>
							<span v-if="scope.row.riskType == '2'">低</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="involveEquipmentSystem"
						label="涉及设备/系统"
						:filters="[
							{ text: '制冷机', value: 0 },
							{ text: '冷冻泵', value: 1 },
							{ text: '冷却泵', value: 2 },
							{ text: '冷却塔', value: 3 },
							{ text: 'BA系统', value: 4 },
							{ text: '热水崩', value: 5 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column prop="operationalOrder" label="操作指令" />
					<el-table-column
						prop="executiveName"
						label="执行人员姓名"
						:filters="[
							{ text: '张三', value: 0 },
							{ text: '李四', value: 1 },
							// { text: '安全', value: 2 },
							// { text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column
						prop="executiveCondition"
						label="发出情况"
						:filters="[
							{ text: '已发出', value: 0 },
							{ text: '未发出', value: 1 },
							// { text: '安全', value: 2 },
							// { text: '所有', value: 3 },
						]"
						:filter-method="filterTag"
						width="90px"
						align="center"
					/>
					<el-table-column prop="address" label="详情查看">
						<template #default="scope">
							<span
								@click="
									handleid(scope.row)((dialogVisible = true))
								"
								>详情查看</span
							>
						</template>
						<!-- <span >详情查看</span> -->
					</el-table-column>
				</el-table>
			</div>
			<!-- <div class="pagination">
				<el-pagination
					v-model:page-size="pageSize3"
					layout="prev, pager, next, jumper"
					:total="1000"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div> -->
		</el-card>
		<el-dialog v-model="dialogVisible" width="50%">
			<template #title>
				<div class="my-header">
					<div>
						<span>工单编号</span> <span>{{ form.data.workOrderNo }}</span>
					</div>
				</div>
			</template>
			<el-divider class="line" />

			<el-form>
				<div class="detail">
					<div class="tm">
						<div class="timer">
							<p>剩余时间</p>
							<p class="time">{{ dayjs(form.data.remainingTime).format('YYYY-MM-DD') }}</p>
						</div>

						<div class="timer">
							<p>触发时间</p>
							<p class="time">{{ dayjs(form.data.triggeringTime).format('YYYY-MM-DD') }}</p>
						</div>

						<div class="timer">
							<p>预期完成时间</p>
							<p class="time">{{ dayjs(form.data.expectedCompletionTime).format('YYYY-MM-DD') }}</p>
						</div>
					</div>

					<div class="question">
						<div class="center">
							<el-form-item label="问题描述">
								<el-input
									v-model="form.data.problemDescription"
									input-style="height:60px"
								/>
							</el-form-item>
						</div>

						<div class="center">
							<el-form-item label="可能原因">
								<el-input
									v-model="form.data.possibleCause"
									input-style="height:60px"
								/>
							</el-form-item>
						</div>

						<div class="center">
							<el-form-item label="操作指令">
								<el-input
									v-model="form.data.operationalOrder"
									input-style="height:60px"
								/>
							</el-form-item>
						</div>

						<div class="center">
							<el-form-item label="友情提示">
								<el-input
									v-model="form.data.friendlyReminder"
									input-style="height:60px"
								/>
							</el-form-item>
						</div>
					</div>

					<div class="right">
						<div class="detail">
							<el-form-item label="已达级别">
								<el-input
									v-model="form.data.executiveName"
									
								/>
								
							</el-form-item>
						</div>

						<div class="success">
							<el-form-item label="无法执行">
								<el-input
									v-model="form.data.cannotExecute"
									placeholder="无法执行理由陈述"
									input-style="height:92px;width:250px"
								/>
							</el-form-item>
							<el-button
								size="small"
								class="commit"
								@click="commit"
								>确认提交</el-button
							>
						</div>

						<div class="success">
							<el-form-item label="成功执行">
								<el-input
									v-model="form.data.successfulExecution"
									placeholder="执行过程陈述"
									input-style="height:92px;width:250px"
								/>
							</el-form-item>
							<el-button
								size="small"
								class="commit"
								@click="commit"
								>确认提交</el-button
							>
						</div>
					</div>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { getConfiguration,updateConfiguration } from "@/api/model/echarts";
// import { WorkOrderId } from "@/api/model/end";
import FileSaver from "file-saver";
import * as XLSX from "xlsx/dist/xlsx.mini.min.js";
import dayjs from "dayjs";
const value1 = ref(true);
var dialogVisible = ref(false);
let form = reactive({
	data:{}
});
const tableData = ref([
	{
		date: "2016-05-03",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
	{
		date: "2016-05-02",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
	{
		date: "2016-05-04",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
	{
		date: "2016-05-01",
		name: "Tom",
		address: "No. 189, Grove St, Los Angeles",
	},
]);
const getdata = async () => {
	let res = await getConfiguration();
	console.log(res, "wwwwwwwwwwwwwwwwwwwwww");
	tableData.value = res.data;
};
const handleid = async (e) => {
	console.log(e.id, "eeeeeeeeeehandel");
	form.data = {}
	// let res = await WorkOrderId(e.id);
	form.data = e;

	// console.log(res, "WorkOrderIdWorkOrderId");
};
async function commit(){
	console.log(form.data);
	await updateConfiguration(form.data)
	getdata()
	dialogVisible.value = false
}
function exportExcel() {
	//需给表格定义一个id或者类名
	console.log("1111111111", XLSX);
	let wb = XLSX.utils.table_to_book(document.querySelector("#table"));
	console.log("222");
	let wbout = XLSX.write(wb, {
		bookType: "xlsx",
		bookSST: true,
		type: "array",
	});
	try {
		FileSaver.saveAs(
			new Blob([wbout], { type: "application/octet-stream" }),
			"111.xlsx"
		); //***是自己导出文件时的命名，随意
	} catch (e) {
		if (typeof console !== "undefined") console.log(e, wbout);
	}
	return wbout;
}
onMounted(() => {
	getdata();
});
</script>

<style lang="less" scoped>
.detail {
	width: 100%;
	display: flex;
	.tm {
		width: 50%;

		.timer {
			width: 100%;
			margin-top: 20px;
			p:first-child {
				font-size: 12px;
				margin: 10px 0;
			}
			.time {
				color: #4d62a5;
				font-size: 12px;
			}
		}
	}
	.question {
		height: 100%;
		.center {
			width: 100%;
			height: 10%;
			margin: 1% 0;
		}
	}
	.right {
		height: 100%;
		.success {
			height: 100px;
			position: relative;
			:deep(.el-button) {
				height: 30px;
				position: absolute;
				left: -3%;
				top: 30%;
				color: #fff;
				width: 60px;
				background: #8faadc;
			}
		}
	}
	.question,
	.tm,
	.right {
		margin: 0 3.333%;
		display: flex;
		flex-wrap: wrap;
	}
	:deep(.el-form-item--default) {
		margin-bottom: 13px;
	}
}
.my-header {
	display: flex;
	flex-direction: row;
	font-size: 25px;
	color: #4d62a5;
	span:first-child {
		font-weight: 700;
		margin-right: 15px;
	}
	span:last-child {
		font-size: 22px;
	}
}
:deep(.el-dialog__body) {
	padding-top: 5px;
}
:deep(.el-divider--horizontal) {
	margin: 15px 0;
}
:deep(.el-form-item__label, .el-input__inner) {
	font-size: 12px;
}
.box {
	display: flex;

	.card-css {
		flex: 1;
		width: 1760px;
		height: 817px;
		position: relative;

		.pagination {
			display: flex;
			justify-content: flex-end;
		}
	}

	.zhpj {
		position: absolute;
		border-bottom: 1px solid #d9deec;
		margin-right: 120px;
		margin-left: -20px;
		padding-left: 20px;
		padding-bottom: 20px;
		width: 100%;

		.zhpj-span {
			font-family: SourceHanSansSC-medium;
			font-weight: 700;
			color: #4d62a5;
			font-size: 20px;
		}
	}

	.table-css {
		display: flex;
		margin-top: 66px;
		justify-content: space-between;

		.switch-css {
			color: #8faadc;
			margin-left: 10px;
		}

		:deep(.el-switch.is-checked .el-switch__core) {
			background-color: #8faadc;
			border-color: #8faadc;
		}

		.biaotou-css {
			display: flex;

			.select01 {
				width: 100px;
			}

			.select02 {
				width: 100px;
				margin-right: 20px;
				margin-left: 20px;
			}

			.btn-01 {
				margin-left: 20px;
				margin-right: 20px;
			}

			.el-button {
				background-color: #8faadc;
				border-color: #8faadc;
			}

			.btn-css {
				flex-grow: 1;
			}
		}
	}

	.table {
		margin-top: 20px;
	}
}
</style>
